Components Basics

Here are some basic properties that are common across all components. Here, we'll introduce each property briefly. More detailed information about properties specific to individual components can be found on their respective pages.

Basic Structure of Components

Each component behaves like a flex item in a flex container, allowing you to easily create a responsive UI layout. For more information on the layout system, click here.

Furthermore, each component has the following basic structure:

• A component can have one or more states (normal, hover, active, focus, disabled, error, readonly).
• Each component has a background color for each state.
• Each component has a border for each state.
• Each component can maintain self-defined spacings to its content or to other components. Refer to the Spacings section for more details.

Basic Properties

The following properties are common to every component.

Generic

METAread more

Name: componentId

Not Editable

Number Property

---y-base__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

---y-base__component-type

The type of the component. For this component it is y-base.

Name: name

String Property

---y-base__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

---y-base__version

The custom version of the Base-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

---y-base__core-theme

The CoreTheme, which will be apllied to the Base. For further information on themes visit the themes page.

Name: subTheme

String Property

---y-base__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Base. For further information on themes visit the themes page.

Name: groupTheme

String Property

---y-base__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

---y-base__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

---y-base__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

---y-base__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

---y-base__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

---y-base__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

---y-base__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

---y-base__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

---y-base__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

---y-base__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

---y-base__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

---y-base__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

---y-base__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

---y-base__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

---y-base__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

---y-base__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

---y-base__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

---y-base__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

---y-base__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

---y-base__bg-color

---y-base__bg-color__normal

---y-base__bg-color__hover

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

---y-base__border-top-color

---y-base__border-top-color__normal

---y-base__border-top-color__hover

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

---y-base__border-top-style

---y-base__border-top-style__normal

---y-base__border-top-style__hover

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

---y-base__border-top-width

---y-base__border-top-width__normal

---y-base__border-top-width__hover

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

---y-base__border-right-color

---y-base__border-right-color__normal

---y-base__border-right-color__hover

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

---y-base__border-right-style

---y-base__border-right-style__normal

---y-base__border-right-style__hover

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

---y-base__border-right-width

---y-base__border-right-width__normal

---y-base__border-right-width__hover

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

---y-base__border-bottom-color

---y-base__border-bottom-color__normal

---y-base__border-bottom-color__hover

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

---y-base__border-bottom-style

---y-base__border-bottom-style__normal

---y-base__border-bottom-style__hover

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

---y-base__border-bottom-width

---y-base__border-bottom-width__normal

---y-base__border-bottom-width__hover

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

---y-base__border-left-color

---y-base__border-left-color__normal

---y-base__border-left-color__hover

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

---y-base__border-left-style

---y-base__border-left-style__normal

---y-base__border-left-style__hover

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

---y-base__border-left-width

---y-base__border-left-width__normal

---y-base__border-left-width__hover

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

---y-base__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

---y-base__box-shadow

---y-base__box-shadow__normal

---y-base__box-shadow__hover

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

---y-base__opacity

---y-base__opacity__normal

---y-base__opacity__hover

The opacity of all colored parts of the component. This value is set in percent.

Generic

Generic > Meta

Only abstract properties, that won't have a direct influence on the look and structure of the component, occur in the meta-group. Properties from this group can only be edited via Detail Panel.

componentId

NumberProperty

The componentID is the identifier of the component, which is unique inside a page. The componentID is used for:

• Addressing components in functions
• Modifying the component's configuration via JavaScript
• Linking event functions with a component

info

This property is read-only and is assigned by the system.

componentType

StringProperty

The componentType is the type of the component. With the help of the component type and the component id, a component can be uniquely addressed. The component type is mostly used to provide meta-information or to verify that the correct element has been addressed. In the Components-Section inside the documentation's sidebar you will find a list of all possible component types.

info

This property is read-only and is assigned by the system.

name

StringProperty

The name is the custom name of the component, which is used for better identification of the component.

version

:::warnung This property is no longer needed and will be deprecated in the future. :::

coreTheme

StringProperty

Themes are associated with a CoreTheme. This allows a CoreTheme to include multiple SubThemes as well as additional theme data. To apply a theme, the CoreTheme must be selected first, followed by an associated SubTheme. For more information on themes, please refer to themes.

subTheme

StringProperty

When a CoreTheme is selected, the applicable SubTheme containing the component styles is chosen here.

groupTheme

StringProperty

The theme group contains specific component variations within the SubTheme.

danger

This functionality has not been integrated yet.

Generic > Display

In the display group properties occur that will influence the way the component is displayed and arranged with its neighboring components.

display

ListProperty

This property specifies the display behavior of the component. This can be set to:

none block flex inline

Some of the display property's specifications are set in different properties according to the selected value of the display property. For example, when flex is selected further specification can be done in the flex property.

position

ListProperty

This property specifies the type of positioning method used for the component. Derzeit wird nur static unterstützt. A position is always specified by top, bottom, left or right values. Depending on the selected value for the position, the starting point for those values will differ.

info

In the future, additional options such as relative, absolute, sticky, and fixed will also be made available.

visible

ListProperty

This property can toggle the visibility of the component. There are three options:

• inherit
  The visibility is inherited from an outer component.
• hidden
  The component is invisible.
• visible
  The component is visible.

This will only hide the element, however if you want to prevent the element from loading you should set the display property to "none".

Generic > Size

sizing

In the sizing group properties define the size of the yComponent. You can either set hard values for size, or alternatively rely on the flex box system, where you will only have to set the min- and max-sizes. PB1_SizingPicker

These properties allow for precise control over the dimensions of the component, including setting constraints on its maximum and minimum sizes.

• width:
  Specifies the width of the component.
• maxWidth:
  Sets the maximum width that the component can have.
• minWidth:
  Defines the minimum width that the component can have.
• height:
  Specifies the height of the component.
• maxHeight:
  Sets the maximum height that the component can have.
• minHeight:
  Defines the minimum height that the component can have.

flex

StringProperty

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with flex-display within the same container. This property's functionality works well together with setting a max-width and max-height to set an upper limit in size or min-width and min-height to set a lower limit in size.

Generic > Placement

In the placement group properties can be adjusted that influence the distances to neighboring elements outside and included elements inside. PB1_SpacingPicker

info

For more info see BoxModel and Placement basics.

margin

These properties allow you to define the spacing between the edges of the component and its surrounding elements in each direction.

The list summarizes properties related to the margin:

• marginTop:
  Specifies the margin at the top of the component.
• marginRight:
  Specifies the margin on the right side of the component.
• marginBottom:
  Specifies the margin at the bottom of the component.
• marginLeft:
  Specifies the margin on the left side of the component.

padding

These properties allow you to define the spacing between the content of the component and its border in each direction.

The list summarizes properties related to the padding:

• paddingTop:
  Specifies the padding at the top of the component.
• paddingRight:
  Specifies the padding on the right side of the component.
• paddingBottom:
  Specifies the padding at the bottom of the component.
• paddingLeft:
  Specifies the padding on the left side of the component.

Style

The style category contains properties that configure the look and feel of the component. Some of these properties are the same for all components, some are added specifically for a certain component. In this case only the style properties that are general should be explained.

Style > Background

In this background group the appearance of the background can be adjusted. For most components only the bgColor property can be found in this group.

bgColor

ColorProperty

The bgColor is the color of the background. This can be set as a color from a palette or a custom hex color. Each component state has its own background color. PB1_ColorPicker

Style > Border

Properties that will change the appearance of the components border can be found in the border group. Some properties are responsible for only one of the borders in the top, bottom, left or right. Other properties are responsible for all four of them at once. Toolbar_BorderExtension

color

Here, a separate color can be set for each edge. The colors can also be chosen differently for each state.

Property names for each edge:

• borderTopColor:
  Color of the top border
• borderRightColor:
  Color of the right border
• borderBottomColor:
  Color of the bottom border
• borderLeftColor:
  Color of the left border

style

Border style defines the style of the border of an element, such as solid, dashed or dotted.

Property names for each edge:

• borderTopStyle
  Style of the top border
• borderRightStyle
  Style of the right border
• borderBottomStyle
  Style of the bottom border
• borderLeftStyle
  Style of the left border

width

Specifies the width of the border of an element.

Property names for each edge:

• borderTopWidth
  Width of the top border
• borderRightWidth
  Width of the right border
• borderBottomWidth
  Width of the bottom border
• borderLeftWidth
  Width of the left border

borderRadius

Defines the rounding of the corners. Applies to all states and edges.

Style > Shadow

Properties concerning the appearance of the shadow around the component can be adjusted in the shadow group. For most components only the box shadow property can be found in this group.

For this example shadow the settings were: x=50 y=50 blur=0 spread=0. The x and y values will move the whole shadow. For positive x-values the shadow will be moved to the right, for negative ones to the left. For positive y-values the shadow will be moved to the bottom, for negative ones to the top. The unit of the values is pixels in all cases.

For this example shadow the settings were: x=50 y=50 blur=5 spread=0. The blur value is also given in pixels and will blur the shadow depending on the value, the higher the value the more intense the blur. The value has to be positive, negative values are forbidden.

For this example shadow the settings were: x=50 y=50 blur=5 spread=30-. The spread value is also given in pixels. This value is responsible for making the shadow, which by default is the same width and height as its component, bigger or smaller. A positive value will increase the width and height of the shadow a negative value will decrease it.

PB1_ShadowPicker

boxShadow

StringProperty

The shadow of the component. This is set by the four sub-properties x, y, blur and spread of the shadow property, which can be further read about in the shadow property section.

Style > Opacity

In the opacity group you can find properties concerning the opacities of areas belonging to the component. For most components only the opacity property can be found in this group.

opacity

NumberProperty

The opacity of all colored parts of the component. This value is set in percent.

Events

Everything related to events can be set in this section. The custom function calls and remote procedure calls are also made in this section.

Events > Lifecycle

This is where you can manage the events associated with the lifecycle of the component.

EvtInit

This section allows you to access the editor for defining the component's init function. Within this editor, you can write custom JavaScript code, which gets executed whenever the component is fully mounted.